<template>
  <div class="">
    <div class="demo">
      <canvas id="canvas" :width="width" :height="height"></canvas>
      
      <div class="draw-btn-group">
        <div :class="{ active: drawType == '' }" title="自由选择" @click="drawTypeChange('')">
          <i class="draw-icon icon-mouse"></i>
        </div>
        <div
          :class="{ active: drawType == 'arrow' }"
          title="线"
          @click="drawTypeChange('line')"
        >
          <i class="draw-icon icon-9"></i>
        </div>
        <div
          :class="{ active: drawType == 'arrow' }"
          title="箭头"
          @click="drawTypeChange('arrow')"
        >
          <i class="draw-icon icon-1"></i>
        </div>
        <div
          :class="{ active: drawType == 'text' }"
          title="文本输入框"
          @click="drawTypeChange('text')"
        >
          <i class="draw-icon icon-2"></i>
        </div>
        <div
          :class="{ active: drawType == 'ellipse' }"
          title="画圆"
          @click="drawTypeChange('ellipse')"
        >
          <i class="draw-icon icon-3"></i>
        </div>
        <div
          :class="{ active: drawType == 'rectangle' }"
          title="画矩形"
          @click="drawTypeChange('rectangle')"
        >
          <i class="draw-icon icon-4"></i>
        </div>
        <div
          :class="{ active: drawType == 'polygon' }"
          title="画多边形"
          @click="drawPolygonEvent"
        >
          <i class="draw-icon icon-6"></i>
        </div>
        <div
          :class="{ active: drawType == 'marker' }"
          title="标记"
          @click="drawTypeChange('marker')"
        >
          <i class="draw-icon icon-8"></i>
        </div>
        <div
          title="保存JSON"
          @click="getCanvasJSON"
        >
          <i class="draw-icon icon-10"></i>
        </div>
      </div>
    </div>
    <img id="img" style="display: none;" :src="imgSrc" />

    <div class="attribute_container">
      <el-form inline size="mini">
        <el-form-item label="虚线设置："></el-form-item>
        <el-form-item label="虚线段长">
          <el-input v-model="strokeDashArrayWidth"></el-input>
        </el-form-item>
        <el-form-item label="虚线间隔">
          <el-input v-model="strokeDashArrayInterval"></el-input>
        </el-form-item>

        <div>
          <el-form-item label="笔触颜色："></el-form-item>
          <el-color-picker v-model="color" show-alpha :predefine="predefineColors"></el-color-picker>
          <el-form-item label="填充色：" style="margin-left: 30px;"></el-form-item>
          <el-color-picker v-model="fillColor" show-alpha :predefine="predefineColors"></el-color-picker>
          <el-form-item label="笔触宽度：" style="margin-left: 30px;"></el-form-item>
          <el-form-item>
            <el-slider style="width: 200px;" :step="0.5" v-model="drawWidth"></el-slider>
          </el-form-item>
        </div>
        <div style="text-align: left;">
          <el-checkbox v-model="lockMove">是否禁止移动图形 (仅对即将绘制的图形生效)</el-checkbox>
        </div>
        <div style="text-align: left;">
          <p>shift + 鼠标左键 可拖动画布</p>
          <p>ctrl + 鼠标中键 可缩放画布</p>
        </div>
      </el-form>
    </div>


    <img style="display: none;" id="markerImg" src="../assets/icons/draw/map-marker.png" alt="">
  </div>
</template>

<script>
import reviewData from './review.js'
export default {
  data() {
    return {
      canvas: null,
      width: 300,
      height: 300,

      customId: '',
      allObjects: [],  // 所有图形对象 - 在保存及回显时使用
      activeObject: null, // 当前选中的图形对象 - 所有自定义属性的操作都在这个对象中进行 => customData 为业务属性对象

      color: 'rgba(0, 136, 255, 1)', // 画笔颜色
      fillColor: 'rgba(0, 136, 255, 0.4)', // 填充色
      drawWidth: 1, // 笔触宽度
      lockMove: false, // 禁止移动对象
      strokeDashArray: [0, 0], // 是否开启虚线 stroke [6, 2] => [每段小虚线的长度，虚线间的间隔]
      strokeDashArrayWidth: 0,
      strokeDashArrayInterval: 0,

      mouseFrom: {x: 0, y: 0},
      mouseTo: {x: 0, y: 0},
      drawType: null,         // 当前绘制图像的种类
      textbox: null,          // 文本绘制对象
      drawingObject: null,    // 当前绘制对象
      moveCount: 1,           // 绘制移动计数器
      doDrawing: false,       // 绘制状态

      //多边形绘图 相关参数
      polygonMode: false,
      pointArray: [],
      lineArray: [],
      activeShape: false,
      activeLine: '',
      line: {},

      // 画布偏移量及缩放量
      relationship: {
        x: 0,
        y: 0,
        zoom: 1
      },

      // 标记点相关
      marker: {
        width: 30  // 最终展示的标记大小
      },

      // 后台拿到的 img
      fileId: '',
      imgSrc: 'https://th.bing.com/th/id/R.4a2296fbae3eef8ccf014f7411c7ac48?rik=9rEGUpvZrHtitQ&riu=http%3a%2f%2fpic16.nipic.com%2f20110827%2f2127531_105629251000_2.jpg&ehk=BwgrEKqEmLbFhAjvQrvWj4Bd%2fuWbF9Uvu9Lh80hEzF4%3d&risl=&pid=ImgRaw&r=0',

      predefineColors: [
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585',
        'rgba(255, 69, 0, 0.68)',
        'rgb(255, 120, 0)',
        'hsv(51, 100, 98)',
        'hsva(120, 40, 94, 0.5)',
        'hsl(181, 100%, 37%)',
        'hsla(209, 100%, 56%, 0.73)',
        '#c7158577'
      ]
    }
  },
  watch: {
    drawType() {
      if (this.textbox) this.textbox.exitEditing()
      // this.canvas.selection = !this.drawType
    },
    width() {
      this.canvas.setWidth(this.width)
    },
    height() {
      this.canvas.setHeight(this.height)
    },
    strokeDashArrayWidth(val) {
      if (val) this.strokeDashArray = [val, this.strokeDashArrayInterval]
    },
    strokeDashArrayInterval(val) {
      if (val) this.strokeDashArray = [this.strokeDashArrayWidth, val]
    }
  },
  mounted() {
    this.loadImg()
  },
  methods: {
    loadImg() { // 加载之前上传的图片
      let img = document.createElement('img')
      img.setAttribute('src', this.imgSrc)
      img.setAttribute('id', 'hidden_img')
      img.style.display = 'none'
      document.body.appendChild(img)
      img.onload = () => {
        this.width = document.querySelector('body').offsetWidth
        this.height = document.querySelector('body').offsetHeight

        // this.width = img.width
        // this.height = img.height

        this.initCanvas()

        const imgInstance = new fabric.Image(img, {
          zIndex: -1,
          selectable: false,
        })
        this.canvas.add(imgInstance)
      }
    },
    initCanvas() { // 初始化 canvas
      this.canvas = new fabric.Canvas('canvas', {
        fileId: this.fileId,
        hasControls: false,  // 是否显示控制器
        selection: false,    // 禁止框选 - （因为框选会选中组，无法处理属性信息）
        backgroundColor: 'rgba(0, 0, 255, 0.1)'  // canvas 整体背景
      })

      // 添加监听事件
      this.canvas.on("mouse:down", this.userMouseDown)
      this.canvas.on("mouse:move", this.userMouseMove)
      this.canvas.on("mouse:up", this.userMouseUp)
      this.canvas.on('selection:created', this.selectionObject)
      this.canvas.on('selection:updated', this.selectionObject)

      console.log('画布中心点', this.canvas.getCenter())
      
      // ctrl+滚轮 画布缩放
      this.canvas.on('mouse:wheel', opt => {
        const e = opt.e
        if (e.ctrlKey || e.metaKey) {
          this.stopDrawPolygon()

          let zoom = (e.deltaY > 0 ? 0.1 : -0.1) + this.canvas.getZoom()
          zoom = Math.max(0.1, zoom)
          zoom = Math.min(5, zoom)
          if (zoom == this.relationship.zoom) return
          const [x, y] = [e.offsetX, e.offsetY]

          this.relationship.x += x / zoom - x / this.relationship.zoom
          this.relationship.y += y / zoom - y / this.relationship.zoom
          const zoomPoint = new fabric.Point(x, y)
          this.canvas.zoomToPoint(zoomPoint, zoom)
          this.relationship.zoom = zoom
        }
      })

      // 撤销
      window.onkeydown = e => {
        const code = e.keyCode || e.which || e.charCode
        const key = e.ctrlKey || e.metaKey

        // 删除键
        if (code == 8 || code == 46) this.deleteObj()

        // ctrl + z
        if (key && code == 90) {
          this.canvas.remove(
            this.canvas.getObjects()[this.canvas.getObjects().length - 1]
          )
        }
      }

      this.reEdit()
    },
    reEdit() { // 从服务器拿到上次的保存结果 - 展示出来
      this.canvas.loadFromJSON(reviewData, this.canvas.renderAll.bind(this.canvas), (o, object) => {})
    },

    getCanvasJSON() { // 获取所有的图形数据 - 点击保存时
      this.allObjects = this.canvas.toJSON(['fileId', 'customId', 'customData', 'customType', 'hasControls', 'selectable', 'lockMovementX', 'lockMovementY', 'strokeDashArray', 'perPixelTargetFind'])
      console.log('--获取所有图形数据--', JSON.stringify(this.allObjects))
    },
    selectionObject(e) { // 点击时 获取选中的图形对象
      this.activeObject = this.canvas.getActiveObject()

      // 调试的时候使用的
      this.activeObject.customData.b = 12
      this.activeObject.customData.bb = 1233
      console.log(this.activeObject)
    },

    drawTypeChange(type) { // 画笔种类变化
      this.drawType = type
      // skipTargetFind 默认false。设置为true时，当鼠标覆盖在Canvas上时，对象的探测均会失效。这个属性可用于提高性能。
      this.canvas.skipTargetFind = !!type
      // When true, mouse events on canvas (mousedown/mousemove/mouseup) result in free drawing. After mousedown, mousemove creates a shape, and then mouseup finalizes it and adds an instance of `fabric.Path` onto canvas.
      // this.canvas.isDrawingMode = false

    },
    deleteObj() { // 删除图形对象
      this.canvas.getActiveObjects().map(item => {
        this.canvas.remove(item)
      })
    },

    drawing() { // 画图方法
      if (this.drawingObject) this.canvas.remove(this.drawingObject)

      let canvasObject = null,
          left = this.mouseFrom.x,
          top  = this.mouseFrom.y,
          mouseFrom = this.mouseFrom,
          mouseTo   = this.mouseTo
      switch(this.drawType) {
        case 'line':
          canvasObject = new fabric.Line(
            [left, top, mouseTo.x, mouseTo.y],
            {
              customType: 'line',
              customId: this.customId,
              customData: {
                customId: this.customId
              },
              stroke: this.color,
              strokeWidth: this.drawWidth / this.relationship.zoom,
              hasControls: false,
              lockMovementX: this.lockMove, 
              lockMovementY: this.lockMove,
              strokeDashArray: this.strokeDashArray
            }
          )
          break
        case 'arrow': // 箭头
          let x1 = mouseFrom.x,
              x2 = mouseTo.x,
              y1 = mouseFrom.y,
              y2 = mouseTo.y
          let w = x2 - x1,
              h = y2 -y1,
              sh = Math.cos(Math.PI / 4) * 16
          
          let sin = h / Math.sqrt(Math.pow(w, 2) + Math.pow(h, 2))
          let cos = w / Math.sqrt(Math.pow(w, 2) + Math.pow(h, 2))
          let w1 = (16 * sin) / 4 / this.relationship.zoom,
              h1 = (16 * cos) / 4 / this.relationship.zoom,
              centerx = sh * cos / this.relationship.zoom,
              centery = sh * sin / this.relationship.zoom
          var path = ` 
            M ${x1} ${y1} 
            L ${x2 - centerx + w1} ${y2 - centery - h1} 
            L ${x2 - centerx + w1 * 2} ${y2 - centery - h1 * 2} 
            L ${x2} ${y2} 
            L ${x2 - centerx - w1 * 2} ${y2 - centery + h1 * 2} 
            L ${x2 - centerx - w1} ${y2 - centery + h1} 
            Z
          `
          canvasObject = new fabric.Path(path, {
            customType: 'arrow',
            customId: this.customId,
            customData: {
              customId: this.customId
            },
            stroke: this.color,
            fill: this.fillColor,
            strokeWidth: this.drawWidth,
            hasControls: false,
            lockMovementX: this.lockMove, 
            lockMovementY: this.lockMove
          })
          break
        case 'rectangle': // 长方形
          // if (e.e.shiftKey) { // 按住shift为正方形
          //   mouseTo.x - left > mouseTo.y - top ? (mouseTo.y = top + mouseTo.x - left) : (mouseTo.x = left + mouseTo.y - top)
          // }
          canvasObject = new fabric.Rect({
            customType: 'rect',
            customId: this.customId,
            customData: {
              customId: this.customId
            },
            left,
            top,
            width: this.mouseTo.x - this.mouseFrom.x,
            height: this.mouseTo.y - this.mouseFrom.y,
            stroke: this.color,
            strokeWidth: this.drawWidth,
            fill: this.fillColor,
            hasControls: false,
            lockMovementX: this.lockMove, 
            lockMovementY: this.lockMove,
            strokeDashArray: this.strokeDashArray
          })
          break
        case 'ellipse': // 椭圆
          // if (e.e.shiftKey) {
          //   mouseTo.x - left > mouseTo.y - top ? (mouseTo.y = top + mouseTo.x - left) : (mouseTo.x = left + mouseTo.y - top)
          // }
          canvasObject = new fabric.Ellipse({
            customType: 'ellipse',
            customId: this.customId,
            customData: {
              customId: this.customId
            },
            left: (mouseTo.x - left) / 2 + left,
            top: (mouseTo.y - top) / 2 + top,
            stroke: this.color,
            fill: this.fillColor,
            originX: "center",
            originY: "center",
            rx: Math.abs(left - mouseTo.x) / 2,
            ry: Math.abs(top - mouseTo.y) / 2,
            strokeWidth: this.drawWidth,
            hasControls: false,
            lockMovementX: this.lockMove, 
            lockMovementY: this.lockMove,
            perPixelTargetFind: true,
            strokeDashArray: this.strokeDashArray
          })
          break
        case 'text':
          this.textbox = new fabric.Textbox("", {
            customType: 'text',
            customId: this.customId,
            customData: {
              customId: this.customId
            },
            left: mouseFrom.x,
            top: mouseFrom.y - 10,
            fontSize: 16,
            borderColor: this.color,
            fill: this.color,
            hasControls: false,
            borderColor: this.color,
            lockMovementX: this.lockMove, 
            lockMovementY: this.lockMove,
            perPixelTargetFind: true,
            strokeDashArray: this.strokeDashArray
          })
          this.canvas.add(this.textbox)
          this.textbox.enterEditing() // 进入编辑状态
          this.textbox.hiddenTextarea.focus()
          break
        default:
          break
      }
      if (canvasObject) {
        this.canvas.add(canvasObject)
        this.drawingObject = canvasObject
      }
    },
    drawPolygonEvent() { // 用户触发绘制多边形
      this.drawType = "polygon"
      this.polygonMode = true

      this.pointArray = new Array() // 顶点集合
      this.lineArray = new Array()  // 线集合
      // this.canvas.isDrawingMode = false
    },
    drawPolygon(e) { // 绘制不规则多边形 （使用 点/线/多边形填充 组合成的）
      let random = Math.floor(Math.random() * 10000)
      let id = new Date().getTime() + random

      let circle = new fabric.Circle({
        radius: 5 / this.relationship.zoom,
        fill: this.fillColor,
        stroke: 'red',
        strokeWidth: this.drawWidth,
        left: (e.pointer.x || e.e.layerX) / this.relationship.zoom - this.relationship.x,
        top: (e.pointer.y || e.e.layerY) / this.relationship.zoom - this.relationship.y,
        selectable: false,
        hasBorders: false,
        hasControls: false,
        originX: "center",
        originY: "center",
        id: id,
        isPolygonCircle: true,
        objectCaching: false
      })

      if (!this.pointArray.length) circle.set({ fill: 'red' })
      let points = [
        (e.pointer.x || e.e.layerX) / this.relationship.zoom - this.relationship.x,
        (e.pointer.y || e.e.layerY) / this.relationship.zoom - this.relationship.y,
        (e.pointer.x || e.e.layerX) / this.relationship.zoom - this.relationship.x,
        (e.pointer.y || e.e.layerY) / this.relationship.zoom - this.relationship.y,
      ]
      this.line = new fabric.Line(points, {
        strokeWidth: this.drawWidth,
        fill: this.fillColor,
        stroke: this.color,
        class: "line",
        originX: "center",
        originY: "center",
        selectable: false,
        hasBorders: false,
        hasControls: false,
        evented: false,
        objectCaching: false,
      })

      if (!this.activeShape) {
        let polyPoint = [
          {
            x: (e.pointer.x || e.e.layerX) / this.relationship.zoom - this.relationship.x,
            y: (e.pointer.y || e.e.layerY) / this.relationship.zoom - this.relationship.y
          }
        ]
        let polygon = new fabric.Polygon(polyPoint, {
          stroke: this.color,
          strokeWidth: this.drawWidth,
          fill: this.fillColor,
          selectable: false,
          hasBorders: false,
          hasControls: false,
          evented: false,
          objectCaching: false,
        })
        this.activeShape = polygon
        this.canvas.add(polygon)
      } else {
        let pos = this.canvas.getPointer(e.e)
        let points = this.activeShape.get("points")
        points.push({ x: pos.x, y: pos.y })
        let polygon = new fabric.Polygon(points, {
          stroke: this.color,
          strokeWidth: this.drawWidth,
          fill: this.fillColor,
          selectable: false,
          hasBorders: false,
          hasControls: false,
          evented: false,
          objectCaching: false,
        })
        this.canvas.remove(this.activeShape)
        this.canvas.add(polygon)
        this.activeShape = polygon
        this.canvas.renderAll()
      }

      this.activeLine = this.line
      this.pointArray.push(circle)
      this.lineArray.push(this.line)
      this.canvas.add(circle)
    },
    generatePolygon() { // 正式生成 不规则多边形 - 删除绘制过程中的图形
      let points = new Array()
      this.pointArray.map(i => {
        points.push({ x: i.left, y: i.top })
        this.canvas.remove(i)
      })
      this.lineArray.map(i => this.canvas.remove(i))
      this.canvas.remove(this.activeShape).remove(this.activeLine)

      let polygon = new fabric.Polygon(points, {
        customType: 'polygon',
        customId: this.customId,
        customData: {
          customId: this.customId
        },
        stroke: this.color,
        strokeWidth: this.drawWidth,
        fill: this.fillColor,
        opacity: 1,
        hasBorders: true,
        hasControls: false,
        lockMovementX: this.lockMove, 
        lockMovementY: this.lockMove,
        perPixelTargetFind: true,
        strokeDashArray: this.strokeDashArray
      })
      this.canvas.add(polygon)

      this.doDrawing = false
      this.stopDrawPolygon()
    },
    stopDrawPolygon() { // 清除绘制多边形的过程
      // 删除点信息
      this.pointArray.map(i => this.canvas.remove(i))
      this.lineArray.map(i => this.canvas.remove(i))
      this.canvas.remove(this.activeShape)

      this.activeLine = null
      this.activeShape = null
      this.drawType = null
      this.polygonMode = false
    },

    drawMarker() { // 绘制标记点
      const img = document.getElementById('markerImg')
      const scaleTimes = img.width / (this.marker.width / this.relationship.zoom)

      const imgInstance = new fabric.Image(img, {
        customType: 'point',
        customId: this.customId,
        customData: {
          customId: this.customId
        },
        left: this.mouseFrom.x,
        top: this.mouseFrom.y,
        hasControls: false,
        scaleX: 1 / scaleTimes,
        scaleY: 1 / scaleTimes,
        lockMovementX: this.lockMove, 
        lockMovementY: this.lockMove,
        originX: 'center',
        originY: 'bottom',
        perPixelTargetFind: true
      })
      this.canvas.add(imgInstance)
    },
    userMouseDown(e) { // 鼠标按下
      this.customId = this.randomString(32)

      let xy = e.pointer
      this.mouseFrom.x = xy.x / this.relationship.zoom - this.relationship.x
      this.mouseFrom.y = xy.y / this.relationship.zoom - this.relationship.y

      if (this.drawType == 'marker') return this.drawMarker()

      this.doDrawing = true
      if (this.drawType == 'text') this.drawing()

      if (this.textbox) {
        this.textbox.enterEditing()
        this.textbox.hiddenTextarea.focus()
      }

      // 绘制多边形
      if (this.drawType == 'polygon') {
        // 目前不解开探测的话 会导致无法闭合，解开探测则在绘制过程中会干扰其他的图形
        this.canvas.skipTargetFind = false
        try {
          // 此段为判断是否闭合多边形，点击红点时闭合多边形
          if (this.pointArray.length > 1) {
            if (e.target && e.target.id == this.pointArray[0].id) { // 点击了初始红点
              this.generatePolygon()
            }
          }
          //未点击红点则继续作画
          if (this.polygonMode) this.drawPolygon(e)
        } catch (error) {
          console.log(error)
        }
      }
    },
    userMouseUp(e) { // 鼠标松开
      let xy = e.pointer
      this.mouseTo.x = xy.x / this.relationship.zoom - this.relationship.x
      this.mouseTo.y = xy.y / this.relationship.zoom - this.relationship.y

      this.drawingObject = null
      this.moveCount = 1
      if (this.drawType != 'polygon') this.doDrawing = false
    },
    userMouseMove(e) { // 鼠标移动
      if (this.moveCount % 2 && !this.doDrawing) return

      // shift + 鼠标左键  移动画布
      if (e.e.shiftKey && e && e.e) {
        this.stopDrawPolygon()

        const delta = new fabric.Point(e.e.movementX, e.e.movementY)
        this.canvas.relativePan(delta)

        this.relationship.x += e.e.movementX / this.relationship.zoom
        this.relationship.y += e.e.movementY / this.relationship.zoom
      }

      this.moveCount++
      let xy = e.pointer
      this.mouseTo.x = xy.x / this.relationship.zoom - this.relationship.x
      this.mouseTo.y = xy.y / this.relationship.zoom - this.relationship.y

      if (this.drawType != "text" || this.drawType != "polygon") this.drawing()
      if (this.drawType == "polygon") {
        if (this.activeLine && this.activeLine.class == "line") {
          var pointer = this.canvas.getPointer(e.e)
          this.activeLine.set({ x2: pointer.x, y2: pointer.y })

          var points = this.activeShape.get("points")
          points[this.pointArray.length] = {
            x: pointer.x,
            y: pointer.y,
            zIndex: 1,
          }
          this.activeShape.set({ points: points })
          this.canvas.renderAll()
        }
        this.canvas.renderAll()
      }
    },
    randomString(len) { // 生成随机字符串
      len = len || 32
      var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
      var maxPos = chars.length
      var pwd = ''
      for (let i = 0; i < len; i++) {
        pwd += chars.charAt(Math.floor(Math.random() * maxPos))
      }
      return pwd + new Date().getTime()
    }
  }
}
</script>
<style lang="less">
*{
  margin: 0;
  padding: 0;
}
</style>
<style lang="less" scoped>
.demo {
  width: 100%;
  height: 100vh;
}
.draw-btn-group {
  top: 10px;
  left: 10px;
  z-index: 1;
  background: #fff;
  position: absolute;
  // width: 1270px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  & > div {
    background: #fafafa;
    cursor: pointer;
    &:hover {
      background: #eee;
    }
    i {
      display: flex;
      background-repeat: no-repeat;
      background-size: 80%;
      background-position: 50% 50%;
      height: 30px;
      width: 30px;
    }
    .icon-1 {
      background-image: url("../assets/icons/draw/1.png");
    }
    .icon-pentagram {
      background-image: url("../assets/icons/draw/pentagram.png");
    }
    .icon-2 {
      background-image: url("../assets/icons/draw/2.png");
    }
    .icon-3 {
      background-image: url("../assets/icons/draw/3.png");
    }
    .icon-4 {
      background-image: url("../assets/icons/draw/4.png");
      background-size: 75%;
    }
    .icon-5 {
      background-image: url("../assets/icons/draw/5.png");
      background-size: 70%;
    }
    .icon-6 {
      background-image: url("../assets/icons/draw/6.png");
    }
    .icon-7 {
      background-image: url("../assets/icons/draw/7.png");
      background-size: 80%;
    }
    .icon-8 {
      background-image: url("../assets/icons/draw/map-marker.png");
      background-size: 80%;
    }
    .icon-9 {
      background-image: url("../assets/icons/draw/line.png");
      background-size: 60%;
    }
    .icon-10 {
      background-image: url("../assets/icons/draw/save.png");
      background-size: 70%;
    }
    .icon-del {
      background-image: url("../assets/icons/draw/del.png");
      background-size: 90%;
    }
    .icon-img {
      background-image: url("../assets/icons/draw/img.png");
      background-size: 80%;
    }
    .icon-back {
      background-image: url("../assets/icons/draw/back.png");
      background-size: 75%;
    }
    .icon-save {
      background-image: url("../assets/icons/draw/save.png");
      background-size: 80%;
    }
    .icon-mouse {
      background-image: url("../assets/icons/draw/mouse.png");
      background-size: 60%;
    }
  }
  .active {
    background: red;
  }
}

.attribute_container{
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  padding: 10px;
  background: #fff;
  display: flex;
}
</style>